<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>块级元素-图片的底部像素(block element - The bottom pixel of the image)</title>
  <!-- 
  CSS中的块级元素是指在HTML文档中以块的形式显示的元素，它们会独占一行或一块空间，不与其他元素并排显示。
  块级元素底部像素的一些常见说明： 
 
    1. **块级元素**：块级元素通常具有默认的 display: block; 样式，例如 <div> 、 <p> 、 <h1> 等。它们会从新行开始，占据整个可用的宽度，并在上下文中形成一个块。 
    
    2. **图片**：图片通常是内联元素，但可以通过CSS样式设置为块级元素。图片的底部像素是指图片底部边缘与父元素底部之间的距离
  -->
  <style>
    .container {
      background-color: orange;
    }

    /* 
      去除img底部像素
       1. display: block
       2. vertical-align: bottom
    */
    .container img {
      /* display: block; */
      vertical-align: top;
    }
  </style>
</head>
<body>

  <div class="container">
    <img src="../../images/gouwujie01.jpg" alt="">
  </div>
  
</body>
</html>